<template>
	 <view>
	    <uni-nav-bar 
		left-icon="back" 
		status-bar=true
		fixed=true
		color="#FFF"
		left-text="返回" 
		right-text="" 
		:title="maintitle"
		:background-color="bgcolor"
		@clickLeft="toback"
		></uni-nav-bar>
		<view>
			<!-- 下拉刷新 上拉加载 -->
			<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
				<sib-list ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn">
					<!-- 内部block可自定义 -->
					<view class="lists" slot="sibScrollList">
						  <view class="hotitem" v-for="(item,index) in list" :key="index" @click="getDetails(item.id,item.type_id)">
							<view class="leftimg">
								<image :src="item.images"></image>
							</view>
							<view class="rightbox">
								<view class="title">{{item.title}}</view>
								<view v-if="item.intro" class="desc">{{item.intro}}</view>
								<view class="labels">
									<text v-for="(sitem,index) in item.labels" v-if="index < 3">
										{{sitem.title}}
									</text>
								</view>
								<view v-if="item.subheading" class="desc">{{item.subheading}}</view>
								<view v-if="item.keyword" class="views keyword">{{item.keyword}}</view>
								<!-- <view v-if="item.see" class="views">{{item.see}}浏览</view> -->
							</view>
						  </view>
					</view>
				</sib-list>
			</view>
		</view>
	  </view>
</template> 

<script>
	import api from '@/pages/utils/api.js';
	export default {
		data() {
			return {
				pagetype:'',
				maintitle:'',
				bgcolor:"#409ED7",
				currPage: 1, // 当前页码
				totalPage: 1 ,
				list:[]
			}
		},
		onLoad(option) {
				this.maintitle = option.title;
				this.pagetype = option.tid;//数据类型
				this.getList(this.currPage);
		},
		mounted() {
			 
		},  
		
		onShow() {
			
		},
		
		methods: {
			toback:function(){
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			  // 刷新touch监听
			  touchstart: function(e) {
			      this.$refs.sibList.refreshStart(e);
			  },
			  touchmove: function(e) {
			      this.$refs.sibList.refreshMove(e);
			  },
			  touchend: function(e) {
			      this.$refs.sibList.refreshEnd(e);
			  },
			  
			  // 下拉刷新
			  isRefresh: function() {
			      var _this = this;
				  _this.currPage = 1;
			      setTimeout(() => {
					  _this.getList(1);
			          // 刷新结束调用
			          this.$refs.sibList.endAfter()
			      }, 1000)
			  },
			  
			  // 上拉加载
			  scrolltolowerFn: function() {
			    var _this = this;
			  	var pages = ++_this.currPage;
			  	var  newData = [];
			  		api.getTabList({
						type_id:_this.pagetype,
			  			page:pages
			  		}).then(res=>{
			  			if(res.code == 1){
			  				newData = res.data;
			  				if(newData.length > 0){
			  					uni.showLoading({
			  						title: '加载中...',
			  						mask: true
			  					})
			  					_this.list = _this.list.concat(newData);
			  					 setTimeout(() => {
			  							uni.hideLoading();
			  					 },1000);
			  				}
			  			}else{
								uni.showToast({
									title: '没有更多数据',
									icon: 'none',
									position:"bottom"
								});
			  				};
			  		});
			  },
			  
			  //获取列表
			  getList: function(p){
				  uni.showLoading({
				      title: '加载中...'
				  });
				var vm = this;
				api.getTabList({
					type_id:vm.pagetype,
					page:p
				}).then(data=>{
					if(data.code == 1){ 
						vm.list = data.data;
						setTimeout(function(){
							uni.hideLoading();
						},1000);
					}
				})  
			  },
			  // 进入详情
			  getDetails:function(id,type_id){
				  var type;
				  if(type_id == 1){
					  type = "美食Title";
					  uni.navigateTo({
					     url: "/pages/menu/details/diet?id="+id+"&type="+type+"&typeid="+type_id,
					  	animationType: 'pop-in',
					  	animationDuration: 200
					  });
				  }else if(type_id == 2){
					  type = "出行Title";
					  uni.navigateTo({
					      url: "/pages/menu/details/travel?id="+id+"&type="+type+"&typeid="+type_id,
					  	animationType: 'pop-in',
					  	animationDuration: 200
					  });
				  }else if(type_id == 3){
					  type = "住宿Title";
					  uni.navigateTo({
					      url: "/pages/menu/details/live?id="+id+"&type="+type+"&typeid="+type_id,
					  	animationType: 'pop-in',
					  	animationDuration: 200
					  });
				  }else if(type_id == 4){
					  type = "新闻Title";
					  uni.navigateTo({
					      url: "/pages/menu/details/news?id="+id+"&type="+type+"&typeid="+type_id,
					  	animationType: 'pop-in',
					  	animationDuration: 200
					  });
				  }
			  }
			  
			  
			}
		}
</script> 

<style lang="scss" scoped>
	.views{
		color:#D7D7D7;
		font-size: 13px;
	}
	.lists{
		padding: 0 1rem;
	}
	 .hottitle{
	 	padding: .5rem 0;
	 }
	 .hotitem {
	 	display: flex;
	 	margin: 1.5rem 0;
	 	justify-content: space-between;
		border-bottom: 1px solid #eee;
	 }
	 .hotitem .leftimg{
	 	flex: 4;
	 	
	 }
	 .rightbox{
	 	padding: 0 0 0 10px;
	 	flex: 5;
	 	
	 }
	 .leftimg image{
	 	width: 100%;
	 	height:120px;
	 	border-radius: .5rem;
	 }
	 
	 .rightbox .title{
	 	font-size: 16px;
	 	text-overflow: -o-ellipsis-lastline;
	 	overflow: hidden;
	 	text-overflow: ellipsis;
	 	display: -webkit-box;
	 	-webkit-line-clamp: 2;
	 	line-clamp: 2;
	 	-webkit-box-orient: vertical;
	 }
	 .rightbox .desc{
	 	font-size: 12px;
	 	color:#B8B2B2;
	 	text-overflow: -o-ellipsis-lastline;
	 	overflow: hidden;
	 	text-overflow: ellipsis;
	 	display: -webkit-box;
	 	-webkit-line-clamp: 2;
	 	line-clamp: 2;
	 	-webkit-box-orient: vertical;
	 }
	 .keyword{
		 text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 line-clamp: 2;
		 -webkit-box-orient: vertical;
	 }
	.labels{
		display: flex;
		padding: 5px 0;
	}
	.labels text{
		background:#E2F0FB;
		color:#9FCAFD;
		text-align: center;
		padding: 2px 5px;
		font-size: 12px;
		border-radius: 2px;
		margin-right: 2px;
	}
</style>
